<script setup lang="ts" name="PagePanel">
interface Props {
	border?: boolean
	shadow?: boolean
}
withDefaults(defineProps<Props>(), {
	border: false,
	shadow: false
})
</script>

<template>
	<div class="page-panel" :class="[{ 'panel-border': border }, { 'box-shadow': shadow }]">
		<slot></slot>
	</div>
</template>

<style scoped>
.page-panel {
	background-color: #ffffff;
	box-sizing: border-box;
	overflow: hidden;
}
.panel-border {
	border: 1px solid #e4e7ed;
}
.box-shadow {
	--un-shadow: var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0, 0, 0, 0.05));
	box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow) !important;
}
</style>
